<template>
	<div>
		<!-- watch对于简单类型的值监听和复合型值监听 -->
		<p>{{ n }}<button @click="n++">累加</button></p>
		<p>{{ s }}<button @click="s += n">拼接</button></p>
		<p>{{ b }}<button @click="b = !b">切换</button></p>
		<h3>
			{{obj.name}}今年{{obj.age}}岁了
			<button @click="obj.age++">年龄增加</button>
			<button @click="obj.name='先生'>改名</button>
		</h3>

		
	</div>
</template>

<script>
export default {
	watch:{
		//监听数组
		arr:{
			handler(val){
				console.log(val)
			},
			deep:true,
			//默认自动执行一次
			immediate:true
		}
		'arr[2].money'
		//对复合性的值进行监听，需要另外的写法
		//开启深度监听，watch默认只能监听简单值
		obj:{
			//执行监听的函数handler
			handler(value,oldValue){
				console.log(value)
			},
			//开启深度监听
			deep:true,//默认false不深度监听
		},
		//只对对象里摸一个属性进行监听
		//用点语法
		'obj.age'(val){
			console.log('只有当年龄改变我才触发：',val)
		}

		n(val){
			console.og('数字被改变了',val)
		},
		"s":function(val){
			console.log('字符串被改变了',val)
		},
		b(val){
			console.log('布尔值被改变了',val)
		},
	},
	data() {
		return {
			n: 1,
			s: '0412',
			b: false,
			obj: { name: '曹浩男', age: 20 },
			arr: [1, 2, { book: '阿Q正传', money: 100 }],
		}
	},
}
</script>

<style>
</style>